<template>
  <div class="statistics-Detail">
    <head-top head-title="投票统计" hidden='true' go-back="true"></head-top>
    <div class="fixed" ref="fixed">
      <ul class="address">
        <li class="border-bottom wrapper" @click="goyuan" v-if="yuanList.length">
          <div class="yuan">
            <span>苑：</span>
            <span class="sdefault" v-show="!yuanValue">请选择苑</span>
            <span class="sdefault1" v-show="yuanValue">{{yuanValue}}</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
        <li class="border-bottom wrapper" @click="gozhuang">
          <div class="zhuang">
            <span>幢：</span>
            <span class="sdefault" v-show="!zhuangValue">请选择幢</span>
            <span class="sdefault1" v-show="zhuangValue">{{zhuangValue}}幢</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
        <li class="wrapper" @click="godanyuan">
          <div class="danyuan">
            <span>单元：</span>
            <span class="sdefault" v-show="!danyuanValue">请选择单元</span>
            <span class="sdefault1" v-show="danyuanValue">{{danyuanValue}}单元</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
      </ul>
      <div class="toupiao-tongji border-bottom">
        <div class="text">投票统计</div>
        <div class="look-vote" @click="lookVoteDetail">查看票数详情</div>
      </div>
      <ul class="nav">
        <li v-for="(item,index ) in dataList" :key="index" @click="clickContent(index)"><span :class="{'text': i === index}">{{item.name}}({{item.count || 0}})</span></li>
      </ul>
    </div>
    <div class="nav-wrapper">
      <form class="nav-container" id="form1">
        <ul class="toupiao-wrapper" ref="weitoupiao" v-show="i===0">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in noVote" :key="index">
            <div class="left">{{item.name}}室</div>
            <div class="right" id="right-id">
              <div class="wei-color">未投票</div>
              <input class="wei-input" @click="selectedVote($event)" type="checkbox" name="id" :value="item.id" :id="item.id">
              <label :for="item.id"></label>
            </div>
          </li>
        </ul>
      </form>
      <form class="nav-container" id="form2">
        <ul class="toupiao-wrapper" ref="weiSend" v-show="i===1">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in noSend" :key="index">
            <div class="left">{{item.name}}室</div>
            <div class="right" id="right-id">
              <div class="wei-color">未送票</div>
              <input class="wei-input" @click="selectedSend($event)" type="checkbox" name="ids" :value="item.id" :id="`${item.id}s`">
              <label :for="`${item.id}s`"></label>
            </div>
          </li>
        </ul>
      </form>
      <form class="nav-container" id="form3">
        <ul class="toupiao-wrapper" ref="weiRecycle" v-show="i===2">
          <li class="tou-wrapper border-bottom-last" v-for="(item,key) in noRecycle" :key="key">
            <div class="left">{{item.name}}室</div>
            <div class="right" id="right-id">
              <div class="wei-color">未回收</div>
              <input class="wei-input" @click="selectedRecycle($event)" type="checkbox" name="idr" :value="item.id" :id="`${item.id}r`">
              <label :for="`${item.id}r`"></label>
            </div>
          </li>
        </ul>
      </form>
    </div>
    <div class="btn" v-show="!showVote" @click="goSubmit">
      <mt-button type="primary" size="large">确认提交</mt-button>
    </div>
    <mt-popup
      v-model="yuanVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in yuanList" :key="'o'+index" @click="selectYuan(item.id, item.name)">{{item.name}}</li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="zhuangVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in zhuangList" :key="'t'+index" @click="selectZhuang(item.id, item.name)" v-show="yid===item.pid">{{item.name}}幢</li>
        <li class="same border-bottom-last" v-for="(item, index) in zhuangList" :key="'s'+index" @click="selectZhuang(item.id, item.name)" v-show="yuanList.length===0">{{item.name}}幢</li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="danyuanVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in danyuanList" :key="index" @click="selectDanyuan(item.id, item.name)" v-show="zid===item.pid">{{item.name}}单元</li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import $ from 'jquery'
  import {getAreas, getVote, submitVote} from '../../api/toupiaotongji.js'
  import {Toast} from 'mint-ui'
  import {saveAreasName, loadAreasName} from '../../common/js/cache.js'

  export default {
    name: 'StatisticsDetail',
    data() {
      return {
        dataList: [{'name': '未投票'}, {'name': '未送票'}, {'name': '未回收'}],
        i: 0,
        showVote: false,
        yuanVisible: false,
        danyuanVisible: false,
        zhuangVisible: false,
        yuanList: [],
        danyuanList: [],
        zhuangList: [],
        yid: -1,
        zid: -1,
        did: -1,
        yuanValue: '',
        zhuangValue: '',
        danyuanValue: '',
        voteStr: '',
        sendStr: '',
        recycleStr: '',
        alreadyVote: [],
        noVote: [],
        noSend: [],
        noRecycle: [],
        status: 4
      }
    },
    created() {
      this._getAreas()
    },
    components: {
      headTop
    },
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'LookVoteDetail') {
        next(vm => {
          vm.yuanValue = loadAreasName().yuan
          vm.zhuangValue = loadAreasName().zhuang
          vm.danyuanValue = loadAreasName().danyuan
          vm.did = loadAreasName().danyuanid
          vm.zid = loadAreasName().zhuangid
          vm.yid = loadAreasName().yuanid
          vm._getVote(vm.did)
        })
      } else {
        next(vm => {
          vm.yuanValue = ''
          vm.zhuangValue = ''
          vm.danyuanValue = ''
        })
      }
    },
    methods: {
      lookVoteDetail() {
        if (!this.danyuanValue) {
          Toast({
            message: '还未选择单元',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.$router.push(`/my/LookVoteDetail/${this.did}/${this.$route.params.vid}`)
      },
      selectedVote(e) {
        if (e.target.checked) {
          e.target.previousElementSibling.innerHTML = '已投票'
          e.target.previousElementSibling.style.color = '#0078de'
        } else {
          e.target.previousElementSibling.innerHTML = '未投票'
          e.target.previousElementSibling.style.color = '#666'
        }
        this.voteStr = $('#form1').serialize().split('=').join('').split('id').join('').split('&').join(',')
      },
      selectedSend(e) {
        if (e.target.checked) {
          e.target.previousElementSibling.innerHTML = '已送票'
          e.target.previousElementSibling.style.color = '#0078de'
        } else {
          e.target.previousElementSibling.innerHTML = '未送票'
          e.target.previousElementSibling.style.color = '#666'
        }
        this.sendStr = $('#form2').serialize().split('=').join('').split('ids').join('').split('&').join(',')
      },
      selectedRecycle(e) {
        if (e.target.checked) {
          e.target.previousElementSibling.innerHTML = '已回收'
          e.target.previousElementSibling.style.color = '#0078de'
        } else {
          e.target.previousElementSibling.innerHTML = '未回收'
          e.target.previousElementSibling.style.color = '#666'
        }
        this.recycleStr = $('#form3').serialize().split('=').join('').split('idr').join('').split('&').join(',')
      },
      _getAreas() {
        getAreas(this.$route.params.aid).then(res => {
          if (res.code === 200) {
            this.yuanList = res.data.yuan
            this.danyuanList = res.data.danyuan
            this.zhuangList = res.data.zhuang
            if (!this.yuanList.length) {
              this.$refs.weitoupiao.style.marginTop = 178 + 'px'
            } else {
              this.$refs.weitoupiao.style.marginTop = 222 + 'px'
            }
          }
        })
      },
      goyuan() {
        this.yuanVisible = true
      },
      gozhuang() {
        if (this.yuanList.length) {
          if (!this.yuanValue) {
            Toast({
              message: '请选择苑',
              position: 'middle',
              duration: 1000
            })
            return
          }
          this.zhuangVisible = true
        } else {
          this.zhuangVisible = true
        }
      },
      godanyuan() {
        if (!this.zhuangValue) {
          Toast({
            message: '请选择幢',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.danyuanVisible = true
      },
      selectYuan(id, name) {
        this.zhuangValue = ''
        this.danyuanValue = ''
        this.yid = id
        this.yuanValue = name
        this.yuanVisible = false
        this.noVote = []
        this.alreadyVote = []
      },
      selectZhuang(id, name) {
        this.danyuanValue = ''
        this.zid = id
        this.zhuangValue = name
        this.zhuangVisible = false
        this.noVote = []
        this.alreadyVote = []
      },
      selectDanyuan(id, name) {
        this.did = id
        this.danyuanValue = name
        this.danyuanVisible = false
        this.noVote = []
        this.alreadyVote = []
        this._getVote(this.did)
      },
      _getVote(did) {
        const areasName = {
          yuan: this.yuanValue,
          zhuang: this.zhuangValue,
          danyuan: this.danyuanValue,
          danyuanid: this.did,
          zhuangid: this.zid,
          yuanid: this.yid
        }
        getVote(did, this.$route.params.vid).then(res => {
          if (res.code === 200) {
            saveAreasName(areasName)
            this.noSend = res.data.voteService
            this.noVote = res.data.noVote
            this.noRecycle = res.data.voteRecovery
            var everyLength = [this.noVote.length, this.noSend.length, this.noRecycle.length]
            this.dataList.forEach((item, index) => {
              this.$set(item, 'count', everyLength[index])
            })
            $('#form1 .wei-input').prop('checked', false).prev().text('未投票')
            $('#form2 .wei-input').prop('checked', false).prev().text('未送票')
            $('#form3 .wei-input').prop('checked', false).prev().text('未回收')
            if (!$('.wei-input').prop('checked')) {
              $('.wei-input').prev().css({'color': '#888'})
            }
          }
        })
      },
      clickContent(index) {
        this.i = index
        if (!this.yuanList.length) {
          this.$refs.weiSend.style.marginTop = 178 + 'px'
          this.$refs.weiRecycle.style.marginTop = 178 + 'px'
        }
        if (this.i === 0) {
          this.status = 4
        }
        if (this.i === 1) {
          this.status = 2
        }
        if (this.i === 2) {
          this.status = 3
        }
        $('#form1 .wei-input').prop('checked', false).prev().text('未投票')
        $('#form2 .wei-input').prop('checked', false).prev().text('未送票')
        $('#form3 .wei-input').prop('checked', false).prev().text('未回收')
        this.voteStr = ''
        this.sendStr = ''
        this.recycleStr = ''
        if (!$('.wei-input').prop('checked')) {
          $('.wei-input').prev().css({'color': '#888'})
        }
      },
      goSubmit() {
        if (this.status === 4) {
          if (!this.voteStr) {
            Toast({
              message: '还未选择已投票房间',
              position: 'middle',
              duration: 1000
            })
            return
          }
        }
        if (this.status === 2) {
          if (!this.sendStr) {
            Toast({
              message: '还未选择已送票房间',
              position: 'middle',
              duration: 1000
            })
            return
          }
        }
        if (this.status === 3) {
          if (!this.recycleStr) {
            Toast({
              message: '还未选择已回收房间',
              position: 'middle',
              duration: 1000
            })
            return
          }
        }
        submitVote(this.$route.params.aid, this.$route.params.vid, this.voteStr || this.sendStr || this.recycleStr, this.status).then(res => {
          if (res.code === 200) {
            Toast({
              message: '提交成功',
              position: 'middle',
              duration: 1000
            })
            this.voteStr = ''
            this.sendStr = ''
            this.recycleStr = ''
            this._getVote(this.did)
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1000
            })
            this._getVote(this.did)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .statistics-Detail{
    padding-top: 40px;
    .wei-color{
      color: #888;
      margin-right: 25px;
    }
    .yi-color{
      margin-right: 25px;
    }
    .fixed{
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      z-index: 2;
    }
    .address{
      border-bottom: 10px solid #f2f2f2;
    }
    .wrapper{
      margin:0 10px;
      display: flex;
      height: 44px;
      line-height: 44px;
      background-color: #fff;
      .yuan,.danyuan,.zhuang{
        flex: 3;
        span{
          &:first-child{
            font-size: 16px;
          }
          &:last-child{
            font-size: 14px;
            color: #666;
          }
          &.sdefault{
            font-size: 14px;
            color: #666;
          }
          &.sdefault1{
            font-size: 14px;
            color: #0078de;
          }
        }
      }
      .img{
        flex: 1;
        text-align: right;
        img{
          width: 10px;
          height: 18px;
          vertical-align: middle;
        }
      }
    }
    .toupiao-tongji {
      display: flex;
      padding: 0 10px;
      height: 35px;
      line-height: 35px;
      background-color: #fff;
      .text{
        flex: 1;
      }
      .look-vote{
        flex: 1;
        text-align: right;
        color: #0078de;
      }
    }
    .tou-wrapper{
      margin:0 10px;
      height: 44px;
      line-height: 44px;
      font-size: 16px;
      .left{
        display: inline;
        text-align: left;
      }
      .right{
        font-size: 14px;
        text-align: right;
        position: relative;
        top: -42px;
        height: 44px;
        input[type='checkbox'] {display: none}
        label { position: absolute; right: -8px; top: 12px;}
        label:before { content: ''; position: absolute; left: -30px; top: 0; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; }
        label:after { content: ''; position: absolute; left: -23px; top: 3px; width: 4px; height: 10px; border: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; transform: rotate(45deg); transition: all 0.3s ease;}
        input[type='checkbox']:checked + label:before { background: #0087de; border-color: #0087de; }
        input[type='checkbox']:checked + label:after { background: #0087de; }
      }
    }
    .toupiao-wrapper{
      padding-bottom: 44px;
      margin-top: 220px;
      -webkit-overflow-scrolling: touch;
    }
    .btn{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 2;
      .mint-button--primary{
        background-color: #0078de;
        font-size: 16px;
      }
      .mint-button{
        border-radius: 0px;
      }
    }
    .mint-popup{
      width: 60%;
      height: 200px;
      border-radius: 5px;
      ul{
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      .same{
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 15px;
      }
    }
    .nav {
      display: flex;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border-bottom: 2px solid #f2f2f2;
      li{
        flex: 1;
        text-align: center;
        font-size: 14px;
        height: 100%;
        .text{
          display: inline-block;
          height: 100%;
          padding: 0 10px;
          border-bottom: 2px solid #0078de;
          color: #0078de;
        }
      }
    }
  }
</style>
